<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>iYo Webtoon Reader</title>
  <link rel="stylesheet" href="font/iconfont.css">
  <link rel="stylesheet" href="index.css">
</head>

<body class="no-image">
  <div id="app">
    <div id="main">
      <div id="tags-hover"></div>
      <div id="tags" class="hide type-tags">
        <div class="dialog-header">
          <span id="tags-tags" lang-text="tags.tags" class="tags-tab"></span>
          <span id="tags-chapters" lang-text="tags.chapters" class="tags-tab"></span>
          <span id="tags-close" class="iconfont icon-close"></span>
        </div>
        <div id="tags-list" class="dialog-body"></div>
        <div id="tags-toolbar" class="dialog-footer">
          <button id="tags-add" lang-text="tags.add" style="float: left;"></button>
          <button id="tags-clear" lang-text="tags.clear"></button>
        </div>
        <div id="tags-resize"></div>
      </div>
      <div id="images-container">
        <div id="images"></div>
      </div>
    </div>
    <div id="toolbar" class="disabled no-handler">
      <div id="zoomtool">
        <span id="btn-zoomout" lang-title="toolbar.zoomout" class="iconfont icon-minus"></span>
        <span id="zoom">100%</span>
        <input id="zoom-input" type="text">
        <span id="btn-zoomin" lang-title="toolbar.zoomin" class="iconfont icon-plus"></span>
      </div>
      <canvas id="canvas"></canvas>
      <div id="handler-preview"></div>
      <div id="handler"></div>
      <div id="tooltip"></div>
      <div id="pagination">
        <span id="btn-first" lang-title="toolbar.first" class="iconfont icon-first"></span>
        <span id="btn-prev" lang-title="toolbar.prev" class="iconfont icon-prev"></span>
        <span id="page">*/*</span>
        <input id="page-input" type="text">
        <span id="btn-next" lang-title="toolbar.next" class="iconfont icon-next"></span>
        <span id="btn-last" lang-title="toolbar.last" class="iconfont icon-last"></span>
      </div>
      <div id="othertool">
        <span id="btn-tag" lang-title="toolbar.tag" class="iconfont icon-tag"></span>
        <span id="btn-fullscreen" lang-title="toolbar.fullscreen" class="iconfont icon-fullscreen"></span>
        <span id="btn-leavefullscreen" lang-title="toolbar.leavefullscreen"
          class="iconfont icon-leavefullscreen"></span>
      </div>
    </div>
  </div>

  <div class="dialog-modal hide" id="tag-dialog">
    <div class="dialog">
      <div class="dialog-header">
        <span class="dialog-title" lang-text="tags.tag"></span>
        <span id="tag-close" dialog-close class="iconfont icon-close"></span>
      </div>
      <div class="dialog-body">
        <table>
          <tr>
            <td><label for="tag-page" lang-text="tags.page"></label></td>
            <td><input id="tag-page" type="number" min="1" step="1"></td>
          </tr>
          <tr>
            <td><label for="tag-comment" lang-text="tags.comment"></label></td>
            <td><input id="tag-comment" type="text"></td>
          </tr>
        </table>
      </div>
      <div class="dialog-footer">
        <button id="tag-updatepage" lang-text="tags.updatePage" style="float: left; display: none"></button>
        <button id="tag-ok" dialog-close lang-text="dialog.ok"></button>
        <button id="tag-cancel" dialog-close lang-text="dialog.cancel"></button>
      </div>
    </div>
  </div>

  <div class="dialog-modal hide" id="setting-dialog">
    <div class="dialog">
      <div class="dialog-header">
        <span class="dialog-title" lang-text="setting.title"></span>
        <span id="setting-close" dialog-close class="iconfont icon-close"></span>
      </div>
      <div class="dialog-body">
        <table>
          <tr>
            <td><label for="scroll-delta" lang-text="setting.scrollDelta"></label></td>
            <td><input id="scroll-delta" type="number" min="1" max="1000" step="1"></td>
          </tr>
          <tr>
            <td><label for="auto-load-history" lang-text="setting.autoLoadHistory"></label></td>
            <td><input id="auto-load-history" type="checkbox"></td>
          </tr>
          <tr>
            <td><label for="read-subfolder" lang-text="setting.readSubfolder"></label></td>
            <td><input id="read-subfolder" type="checkbox"></td>
          </tr>
          <tr>
            <td><label for="background-color" lang-text="setting.backgroundColor"></label></td>
            <td><input id="background-color" type="color"></td>
          </tr>
          <tr>
            <td><label for="history-count" lang-text="setting.historyCount"></label></td>
            <td><input id="history-count" type="number" min="0" max="100" step="1"></td>
          </tr>
          <tr>
            <td><label for="chapter-rule" lang-text="setting.chapterRule"></label></td>
            <td><input id="chapter-rule" type="text"></td>
          </tr>
          <tr>
            <td><label for="display-page" lang-text="setting.displayPage"></label></td>
            <td><input id="display-page" type="checkbox"></td>
          </tr>
          <tr>
            <td><label for="display-time" lang-text="setting.displayTime"></label></td>
            <td><input id="display-time" type="checkbox"></td>
          </tr>
        </table>
      </div>
      <div class="dialog-footer">
        <button id="setting-ok" dialog-close lang-text="dialog.ok"></button>
        <button id="setting-cancel" dialog-close lang-text="dialog.cancel"></button>
      </div>
    </div>
  </div>

  <div id="fs-title"></div>
  <div id="fs-page"></div>
  <div id="fs-time"></div>

  <script type="module" src="index.js"></script>
</body>

</html>